<template>
	<view>
		<view class="color-ffffff container-item" >
			<view class="text-20 padded-t-20 font-weight">暂无数据</view>
			<view class="add-btn margin-t-10 text-16" @click="showPopup">点击此处，填写产品信息!</view>
			<view class="grid  border-radius-10 color-838A99">
			  <view class="grid-item">
				<image src="/static/image/index-01.jpg" class="grid-icon" mode="widthFix"></image>
				<text class="text">我的消息</text>
			  </view>
			  <view class="grid-item">
				<image src="/static/image/index-02.jpg" class="grid-icon" mode="widthFix"></image>
				<text class="text">资料申诉</text>
			  </view>
			  <view class="grid-item">
				<image src="/static/image/index-03.png" class="grid-icon" mode="widthFix"></image>
				<text class="text">资料更新</text>
			  </view>
			  <view class="grid-item">
				<image src="/static/image/index-04.jpg" class="grid-icon" mode="widthFix"></image>
				<text class="text">历史记录</text>
			  </view>
			</view>
		</view>
		<view class="margin-15">
			<view class="text-16">
				<view class="margin-b-15 margin-t-15">
					<text class=" ">优质产品推荐</text ><text class="fr color-3667E4P">更多</text>
				</view>	
				<view class="bg-ffffff padded-20 text-center border-radius-5">
					<view class="font-weight margin-t-15">暂无推荐</view>
					<view class="margin-t-5 color-838A99"  @click="showPopup">点击此处，补缺信用信息 !</view>
				</view>
			</view>
			<view class="tab-container">
			    <view 
			      class="tab-item" 
			      :class="{ 'tab-active': currentTab === 1 }"
			      @click="currentTab = 1"
			    >
			      本月清单
			    </view>
			    <view 
			      class="tab-item" 
			      :class="{ 'tab-active': currentTab === 2 }"
			      @click="currentTab = 2"
			    >
			      全部清单
			    </view>
			</view>	
			<view v-if="currentTab==1" class="text-16 bg-ffffff padded-20 text-center border-radius-5">
				<view class="font-weight margin-t-15">暂无推荐</view>
				<view class="margin-t-5 color-838A99"  @click="showPopup">点击此处，填写产品信息 !</view>
			</view>
			<view v-else-if="currentTab==2" class="text-16 bg-ffffff padded-20 text-center border-radius-5">
				<view class="font-weight margin-t-15">暂无推荐</view>
				<view class="margin-t-5 color-838A99"  @click="showPopup">点击此处，填写产品信息 !</view>
			</view>
		</view>
		
		 <uni-popup ref="popup"  type="dialog">
<!-- 		      <uni-popup-dialog mode="base" title="请根据引导填写用户数据!" :value="dialogValue" @confirm="handleConfirm"> -->
		       <view class="container bg-ffffff">
				   <view class="margin-t-10 margin-b-15">请根据引导填写用户数据!</view>
		         <view class="step" v-for="(step, index) in steps" :key="index">
		           <view class="step-indicator">
		             <view class="circle" :class="{ active: step.completed, current: step.current }">
		               <text v-if="step.completed">✔</text>
		               <text v-else>{{ index + 1 }}</text>
		             </view>
		             <view class="line" v-if="index < steps.length - 1"></view>
		           </view>
		           <view class="step-content">
		             <view class="step-title" :class="{'step-title-active': step.completed,'step-title-current': step.current}">{{ step.title }}</view>
		             <view class="step-description">{{ step.description }}</view>
		           </view>
		       	  <view>
		       		  <button class="step-button" size="mini" @click="step.action">{{ step.buttonText }}</button>
		       	  </view>
		         </view>
				 <button class="btn left-btn" @click="closePopup" type="primary" plain="true" size="mini">跳过</button>
				 
		       </view>
<!-- 		      </uni-popup-dialog> -->
		    </uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
		  return {
			 currentTab:1,
		    steps: [
		      { 
		        title: '第一步 基础资料', 
		        description: '系统使用的基础数据',
		        buttonText: '修改',
		        // action: () => console.log('修改基础资料'),
		        completed: true,
		        current: false
		      },
		      { 
		        title: '第二步 产品信息', 
		        description: '帮助您管理还款的数据',
		        buttonText: '点击填写',
		        // action: () => console.log('填写产品信息'),
		        completed: false,
		        current: true
		      },
		      { 
		        title: '第三步 个人信用', 
		        description: '为您比对个人贷款产品库',
		        buttonText: '点击填写',
		        // action: () => console.log('填写个人信用'),
		        completed: false,
		        current: false
		      },
		      { 
		        title: '第四步 企业信用', 
		        description: '为您比对企业贷款产品库',
		        buttonText: '点击填写',
		        // action: () => console.log('填写企业信用'),
		        completed: false,
		        current: false
		      }
		    ]
		  };
		},
		methods: {
			// 显示弹窗
			showPopup() {
				this.$refs.popup.open()
			},
			// 关闭弹窗
			closePopup() {
			    this.$refs.popup.close(); 
			},
			// 确认提交
			handleConfirm() {
				
			}
		}
	}
</script>
<style>
	.tab-container {
	  display: flex;
	  width: 100%;
	}
	.tab-item {
	/*  flex: 1; */
	  text-align: center;
	  padding: 20rpx;
	  color: #666;
	}
	.tab-item.tab-active {
	  font-size: 18px;
	  color: #2C8AFF;
	  font-weight: bold;
	}
	.grid {
	  display: flex;
	  flex-wrap: wrap;
	  justify-content: flex-start;
	  margin-top: 30px;
	}
	.grid-item {
	  width: 25%;
	  display: flex;
	  flex-direction: column;
	  align-items: center;
	  color: #fff;
	}
	.grid-icon {
	  width: 80rpx;
	  height:80rpx;
	  margin-bottom: 8rpx;
	}
	.container-item{
		background-color: #2496FF;
		padding:20px;
		border-radius: 0 0 20px 20px;
	}
	.btn{
		padding:7px 0;
		color:#646D7F !important;
		width: 100%;
		border: 0 !important;
		box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1), 0 0px 1px rgba(0, 0, 0, 0.08);
	}
	.container {
	  padding:10px 30px 20px 30px;
	  border-radius: 10px;
	}
	.step {
	  display: flex;
	  margin-bottom:20px;
	  justify-content: flex-start;
	}
	.step:last-child {
		margin-bottom:0;
	}
	.step-indicator {
	  display: flex;
	  flex-direction: column;
	  align-items: center;
	  margin-right: 30rpx;
	}

	.circle {
	  width: 40rpx;
	  height: 40rpx;
	  border-radius: 50%;
	  background-color: #fff;
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  font-size: 24rpx;
	  color:#D7D7D7;
	  border:1px solid #D7D7D7;
	}
	.active {
		background-color: #fff;
	     color: #2979ff ;
	     border: 1px solid #007aff;
	}
	.step-title-active{
		color: #1A1A1A !important;
	}
	.step-title-current{
		color: #3679FF !important;
	}
	.current {
	  border: 2rpx solid #007aff;
	  background-color: #007aff;
	  color: #fff;
	}

	.line {
	  width: 2px;
	  height: 40px;
	  background-color: #e0e0e0;
	  margin-top: 5px;
	}
	.step-content {
	  flex: 1;
	}
	.step-title {
	  font-size: 14px;
	  font-weight: bold;
	  margin-bottom: 10rpx;
	  color: #D7D7D7;
	}
	.step-description {
	  font-size: 12px;
	  color: #B3B3B3;
	  margin-bottom: 10rpx;
	}
	.step-button {
	  background-color: #007aff;
	  color: #ffffff;
	  padding: 10rpx 0;
	  border-radius: 10rpx;
	  font-size: 28rpx;
	  width:80px;
	  font-size: 12px;
	  margin-left: 10px;
	}
</style>